<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p> {{ num + 22 }} </p>
  </div>
  <p v-if="flag">这是if代码</p>
  <p v-else>这是else代码</p>
  <p> {{ flag ? "孙悟空" : "六耳猕猴" }} </p>
  <p v-html="rawHtml"></p>
  <p v-bind:id="id">绑定属性值</p>
  <p v-show="flag">这是show代码</p>
  <ul>
    <li v-for="(item, index) in newsList" :key="item.id">
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: "这是引用变量的msg的值",
      flag: true,
      num: 66,
      rawHtml: "<a href='https://www.itheima.com'>黑马</a>",
      id: 10086,
      newsList: [
        {
          id: 1001,
          title: "今日新闻1"
        },
        {
          id: 1002,
          title: "今日新闻2"
        },
        {
          id: 1003,
          title: "今日新闻3"
        },
        {
          id: 1004,
          title: "今日新闻4"
        }
      ]
    }
  },
  // props: {
  //   msg: String
  // }
}
</script>